<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>AdminLTE 2 | Calendar</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="../../plugin/fullcalendar/fullcalendar.min.css">
		<link rel="stylesheet" href="../../plugin/fullcalendar/fullcalendar.print.min.css" media="print">
		<link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
		<link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
		<link rel="stylesheet" href="../../system/css/common.css">

		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body class="hold-transition gray-bg sidebar-mini">
		<div class="wrapper">
			<section class="content">
				<div class="row">
					<div class="col-md-3">
						<div class="box box-primary">
							<div class="box-header with-border">
								<h4 class="box-title">课拖动事件</h4>
							</div>
							<div class="box-body">
								<div id="external-events">
									<div class="external-event bg-green">享用午餐</div>
									<div class="external-event bg-yellow">回到家中</div>
									<div class="external-event bg-aqua">做家庭作业</div>
									<div class="external-event bg-light-blue">UI设计工作</div>
									<div class="external-event bg-red">睡个好觉</div>
									<div class="checkbox">
										<label for="drop-remove">
											<input type="checkbox" id="drop-remove">
											拖拽后移除
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="box box-solid">
							<div class="box-header with-border">
								<h3 class="box-title">创建事件</h3>
							</div>
							<div class="box-body">
								<div class="btn-group" style="width: 100%; margin-bottom: 10px;">
									<!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
									<ul class="fc-color-picker" id="color-chooser">
										<li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
										<li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
									</ul>
								</div>
								<div class="input-group">
									<input id="new-event" type="text" class="form-control" placeholder="事件标题">
									<div class="input-group-btn">
										<button id="add-new-event" type="button"
											class="btn btn-primary btn-flat">添加</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-9">
						<div class="box box-primary">
							<div class="box-body no-padding">
								<div id="calendar"></div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<div class="control-sidebar-bg"></div>
		</div>

		<script src="../../plugin/jquery/jquery.min.js"></script>
		<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
		<script src="../../plugin/jquery-ui/jquery-ui.min.js"></script>
		<script src="../../plugin/fastclick/fastclick.js"></script>
		<script src="../../adminlte/js/adminlte.min.js"></script>
		<script src="../../plugin/moment/min/moment.min.js"></script>
		<script src="../../plugin/fullcalendar/fullcalendar.min.js"></script>
		<script src="../../plugin/fullcalendar/locale/zh-cn.js"></script>
		<script>
			$(function() {

				/* initialize the external events
				 -----------------------------------------------------------------*/
				function init_events(ele) {
					ele.each(function() {

						// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
						// it doesn't need to have a start or end
						var eventObject = {
							title: $.trim($(this).text()) // use the element's text as the event title
						}

						// store the Event Object in the DOM element so we can get to it later
						$(this).data('eventObject', eventObject)

						// make the event draggable using jQuery UI
						$(this).draggable({
							zIndex: 1070,
							revert: true, // will cause the event to go back to its
							revertDuration: 0 //  original position after the drag
						})

					})
				}

				init_events($('#external-events div.external-event'))

				/* initialize the calendar
				 -----------------------------------------------------------------*/
				//Date for the calendar events (dummy data)
				var date = new Date()
				var d = date.getDate(),
					m = date.getMonth(),
					y = date.getFullYear()
				$('#calendar').fullCalendar({
					header: {
						left: 'prev,next today',
						center: 'title',
						right: 'month,agendaWeek,agendaDay'
					},
					buttonText: {
						today: '今天',
						month: '月',
						week: '周',
						day: '日'
					},
					//Random default events
					events: [{
							title: '全天活动',
							start: new Date(y, m, 1),
							backgroundColor: '#f56954', //red
							borderColor: '#f56954' //red
						},
						{
							title: '长事件',
							start: new Date(y, m, d - 5),
							end: new Date(y, m, d - 2),
							backgroundColor: '#f39c12', //yellow
							borderColor: '#f39c12' //yellow
						},
						{
							title: '参加会议',
							start: new Date(y, m, d, 10, 30),
							allDay: false,
							backgroundColor: '#0073b7', //Blue
							borderColor: '#0073b7' //Blue
						},
						{
							title: '享用午餐',
							start: new Date(y, m, d, 12, 0),
							end: new Date(y, m, d, 14, 0),
							allDay: false,
							backgroundColor: '#00c0ef', //Info (aqua)
							borderColor: '#00c0ef' //Info (aqua)
						},
						{
							title: '生日聚会',
							start: new Date(y, m, d + 1, 19, 0),
							end: new Date(y, m, d + 1, 22, 30),
							allDay: false,
							backgroundColor: '#00a65a', //Success (green)
							borderColor: '#00a65a' //Success (green)
						},
						{
							title: '点击跳转到百度',
							start: new Date(y, m, 28),
							end: new Date(y, m, 29),
							url: 'http://www.baidu.com/',
							backgroundColor: '#3c8dbc', //Primary (light-blue)
							borderColor: '#3c8dbc' //Primary (light-blue)
						}
					],
					editable: true,
					droppable: true, // this allows things to be dropped onto the calendar !!!
					drop: function(date, allDay) { // this function is called when something is dropped
						// retrieve the dropped element's stored Event Object
						var originalEventObject = $(this).data('eventObject')

						// we need to copy it, so that multiple events don't have a reference to the same object
						var copiedEventObject = $.extend({}, originalEventObject)

						// assign it the date that was reported
						copiedEventObject.start = date
						copiedEventObject.allDay = allDay
						copiedEventObject.backgroundColor = $(this).css('background-color')
						copiedEventObject.borderColor = $(this).css('border-color')

						// render the event on the calendar
						// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
						$('#calendar').fullCalendar('renderEvent', copiedEventObject, true)

						// is the "remove after drop" checkbox checked?
						if ($('#drop-remove').is(':checked')) {
							// if so, remove the element from the "Draggable Events" list
							$(this).remove()
						}
					}
				})

				/* ADDING EVENTS */
				var currColor = '#3c8dbc' //Red by default
				//Color chooser button
				var colorChooser = $('#color-chooser-btn')
				$('#color-chooser > li > a').click(function(e) {
					e.preventDefault()
					//Save color
					currColor = $(this).css('color')
					//Add color effect to button
					$('#add-new-event').css({
						'background-color': currColor,
						'border-color': currColor
					})
				})
				$('#add-new-event').click(function(e) {
					e.preventDefault()
					//Get value and make sure it is not null
					var val = $('#new-event').val()
					if (val.length == 0) {
						return
					}

					//Create events
					var event = $('<div />')
					event.css({
						'background-color': currColor,
						'border-color': currColor,
						'color': '#fff'
					}).addClass('external-event')
					event.html(val)
					$('#external-events').prepend(event)

					//Add draggable funtionality
					init_events(event)

					//Remove event from text input
					$('#new-event').val('')
				})
			})
		</script>
	</body>
</html>
